import type {
  Component,
  ConfigItem,
  resourcesList,
} from "../../../../../../component";
import type { JH } from "../../../../test/run";
//, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
export class Img
  implements Component<JQueryStatic, JH> {
  pack() {
    console.log("packing....");
  }
  getName() {
    return "plainImg";
  }
  getJs(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [
    ];
  }
  getCss(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [
      {
        type: "file",
        path: "res/css/index.css",
      },
    ];
  }
  afterLoad(
    $: JQueryStatic,
    dom: JH,
    resources: resourcesList[],
    domSelector: string
  ) {
    Array.from(dom.find("img")).forEach((val) => {
      const name = $(val).attr("src");

      const dest =
        resources.find((val) => val.after.name === domSelector + name)?.after
          .val
      dest &&
        $(val).attr("src", dest);
    });
  }
  //, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
  config(
    configArr: ConfigItem<JQueryStatic, JH>[],
    resources: resourcesList[]
  ) {
    configArr.push({
      domSelector: "DOMSELECTOR",
      desc: [
        {
          name: "修改图片",
          value: "",
          inputType: "resources",
          onchange($, ele, val, baseUrl) {
            ele
              .find("img")
              .attr("src", baseUrl + val[0]);
          },
        }
      ],
      trigger: ($: JQueryStatic, domSelector: string) => {
        return $(domSelector).find("img");
      },
    });
  }
  require() {
    return {
      plainImg: "./res/img/bg.jpg",
    };
  }
}
